<template>
  <scroll-view scroll-y="true" :style="{ 'height': heightView + 'rpx' }" class="home-box" @scrolltolower="handlerScroll">

    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="1000" dot-s
      indicator-color="#8c8c8c" indicator-active-color="white">
      <swiper-item v-for="(item, index) in swiperList" :key="item.id">
        <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?id=' + item.id">
          <image :src="item.image" />
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 分类导航 -->
    <view class="classify">
      <navigator class="classify-item" v-for="(item, index) in classifyList" :key="item.id"
        :url="'/subpkg/goods_detail/goods_detail?id=' + item.id" open-type="navigate" hover-class="navigator-hover">
        <image :src="item.image" mode="scaleToFill" />
        <text>{{ item.msg }}</text>
      </navigator>
    </view>

    <!-- 楼层图 -->
    <storey :list="storeyList" :title="'测试标题'"></storey>

    <!-- 商品列表 -->
    <goods :list="goodsList" :classify="goodClassifyList" @choose-classify="chooseClassify"></goods>


  </scroll-view>
</template>

<script lang="ts" setup>
import Storey from '../../components/storey/Storey.vue'
import Goods from "@/components/goods/Goods.vue"
import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from '@dcloudio/uni-app'
import { $showMsg } from '../../config/methods/index'
import { ref } from 'vue'
import { api } from "@/request/request"
import type { SwiperList, GoodsList, StoreyList, ClassifyList, ChooseClassifyData } from "@/config/data/data"


//整个视口的高度
const heightView = ref();

//分页查询参数
const pageParam = ref({
  page: 1,
  size: 8,
  commodityTypeName: '生活用品'
})

//首页轮播图的数据列表
const swiperList = ref<SwiperList[]>([]);

//分类导航数据列表
const classifyList = ref<ClassifyList[]>([]);

//楼层数据列表
const storeyList = ref<StoreyList[]>([]);

//商品列表分类
const goodClassifyList = ref<string[]>([]);

//商品列表数据
const goodsList = ref<GoodsList[]>([]);

//选择商品分类
const chooseClassify = (data: ChooseClassifyData) => {
  pageParam.value.page = 1;
  pageParam.value.commodityTypeName = data.content;
  goodsList.value = [];
  paginatedQueries()
}

//监听滚动条是否触底
const handlerScroll = () => {
  //加载下一页商品列表数据
  setTimeout(() => {
    pageParam.value.page += 1;
    //初始化商品列表数据
    paginatedQueries();
  }, 2000)
};

//分页获取商品列表
const paginatedQueries = () => {
  api.commodityPaginatedQueries(pageParam.value.page, pageParam.value.size, pageParam.value.commodityTypeName).then((res) => {
    if (res.data.length > 0) {
      goodsList.value.push(...res.data)
    }
  })
}


// 页面周期函数--监听页面加载
onLoad(() => {

  //整个视口的高度
  const systemInfo = uni.getSystemInfoSync();
  //因为使用的是rpx因此乘以2
  heightView.value = systemInfo.windowHeight * 2;



  //首页轮播图的数据列表
  swiperList.value = [
    { id: 1, image: 'https://www.lyzhnb.top/wf/w-1.jpg', navigator: "" },
    { id: 2, image: 'https://www.lyzhnb.top/wf/wf-.jpg', navigator: "" },
    {
      id: 3,
      image: ' https://www.lyzhnb.top/wf/snipaste20240107_100435.png',
      navigator: ""
    }
  ]

  //分类导航数据列表
  classifyList.value = [
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      msg: '首页',
      id: "102",
      navigator: '',
    },
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      msg: '首页',
      id: "103",
      navigator: " 1",
    },
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      msg: '首页',
      id: "104",
      navigator: '',
    },
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      msg: '首页',
      id: "105",
      navigator: '',
    },
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      msg: '首页',
      id: "106",
      navigator: '',
    },
  ];

  //楼层数据列表
  storeyList.value = [
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      id: "103",
      navigator: '',
    },
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      id: "102",
      navigator: '',
    },
    {
      image: 'https://www.lyzhnb.top/wf/wf-.jpg',
      id: "101",
      navigator: '',
    },
  ];

  //商品列表分类
  goodClassifyList.value = ["生活用品", "零哺食品", "营养补品"];


  //初始化商品列表数据
  paginatedQueries();

})

// 页面周期函数--监听页面初次渲染完成
onReady(() => { })
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => { })
// 页面周期函数--监听页面隐藏
onHide(() => { })
// 页面周期函数--监听页面卸载
onUnload(() => { })


// 页面处理函数--监听用户下拉动作
// onPullDownRefresh() { uni.stopPullDownRefresh(); },
// 页面处理函数--监听用户上拉触底
// onReachBottom() {},
// 页面处理函数--监听页面滚动(not-nvue)
// onPageScroll(event) {},
// 页面处理函数--用户点击右上角分享
// onShareAppMessage(options) {},
</script>

<style scoped lang="scss">
.home-box {
  position: relative;
  background-color: $uni-bg-color;
}

swiper {
  height: 330rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $uni-box-color;

  .swiper-item {
    width: 99%;
    height: 100%;
    margin: auto;
  }

  image {
    width: 100%;
    height: 100%;
  }
}

.classify {
  width: 98%;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  justify-items: center;
  grid-gap: 60rpx 0;
  padding: 30rpx 0 0;
  border-radius: 3rpx;
  background-color: $uni-box-color;
  margin: auto;

  .classify-item {
    width: 85rpx;
    border-radius: 50%;

    image {
      width: 100%;
      height: 85rpx;
      border-radius: 50%;
    }

    text {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25rpx;
      font-weight: 600;
      margin-top: -8rpx;
      color: rgb(147, 152, 152);
    }
  }
}
</style>
